<ui:composition xmlns="http://www.w3.org/1999/xhtml"
	xmlns:ui="http://java.sun.com/jsf/facelets"
	xmlns:h="http://java.sun.com/jsf/html"
	xmlns:f="http://java.sun.com/jsf/core"
	xmlns:p="http://primefaces.org/ui" template="/pageUtils/template.xhtml">

	<ui:define name="body">
		<h:form prependId="false">
			<div align="left">
				<p:messages id="messages" autoUpdate="true" />
				<p:panel header="Cadastro de Eleitor">
					<h:panelGrid columns="6" id="painel" width="100%">

						<h:outputText value="Nome *" />
						<p:inputText style="width:250" id="nome"
							label="O nome deve ser informado" required="true"
							title="informe o nome do eleitor" maxlength="60"
							value="#{eleitorController.eleitor.nome}" />
						<p:tooltip for="nome" showEvent="focus" hideEvent="blur" />

						<h:outputText value="Titulo *" />
						<p:inputText style="width:50" id="titulo"
							label="O titulo deve ser informado" required="true"
							maxlength="15" title="informe o nome do eleitor"
							value="#{eleitorController.eleitor.titulo}" />
						<p:tooltip for="titulo" showEvent="focus" hideEvent="blur" />

						<h:outputText value="Local *" />
						<p:selectOneMenu value="#{eleitorController.local.id}"
							style="width:250">
							<f:selectItem itemLabel="Selecione o local" itemValue="" />
							<f:selectItems value="#{eleitorController.locais}" var="local"
								itemLabel="#{local.nome}" itemValue="#{local.id}" />
						</p:selectOneMenu>
						<p:tooltip for="nome" showEvent="focus" hideEvent="blur" />

						<h:outputText value="Secao *" />
						<p:inputText style="width:50" id="secao"
							label="a secao deve ser informado" required="true" minlength="4" maxlength="4" 
							title="informe a secao do eleitor"
							value="#{eleitorController.eleitor.secao}" />
						<p:tooltip for="secao" showEvent="focus" hideEvent="blur" />

						<h:outputText value="Responsavel *" />
						<p:selectOneMenu value="#{eleitorController.responsavel.id}"
							style="width:250">
							<f:selectItem itemLabel="Selecione o local" itemValue="" />
							<f:selectItems value="#{eleitorController.responsaveis}"
								var="responsavel" itemLabel="#{responsavel.nome}"
								itemValue="#{responsavel.id}" />
						</p:selectOneMenu>
						<p:tooltip for="nome" showEvent="focus" hideEvent="blur" />

						<h:outputText value="Zona *" />
						<p:inputText style="width:50" id="zona"
							label="a zona deve ser informada" required="true" minlength="3"
							maxlength="3" title="informe a zona do eleitor"
							value="#{eleitorController.eleitor.zona}" />
						<p:tooltip for="zona" showEvent="focus" hideEvent="blur" />

						<h:outputText value="Rua" />
						<p:inputText id="rua" value="#{eleitorController.eleitor.rua}"
							style="width:250" maxlength="30" title="informe a rua" />
						<p:tooltip for="rua" showEvent="focus" hideEvent="blur" />

						<h:outputText value="Numero" />
						<p:inputText id="numero"
							value="#{eleitorController.eleitor.numero}" maxlength="6"
							title="informe o numero da rua" />
						<p:tooltip for="numero" showEvent="focus" hideEvent="blur" />

						<h:outputText value="Bairro" />
						<p:inputText id="bairro"
							value="#{eleitorController.eleitor.bairro}" maxlength="30"
							style="width:250" title="informe o bairro" />
						<p:tooltip for="bairro" showEvent="focus" hideEvent="blur" />

						<h:outputText value="Celular" />
						<p:inputMask id="celular"
							value="#{eleitorController.eleitor.celular}" maxlength="10"
							mask="(99) 9999-9999" title="informe o numero do celular" />
						<p:tooltip for="celular" showEvent="focus" hideEvent="blur" />

						<h:outputText value="Residencial" />
						<p:inputMask id="residencial"
							value="#{eleitorController.eleitor.residencial}" maxlength="10"
							mask="(99) 9999-9999"
							title="informe o numero do fone residencial" />
						<p:tooltip for="residencial" showEvent="focus" hideEvent="blur" />

						<h:outputText value="Comercial" />
						<p:inputMask id="comercial"
							value="#{eleitorController.eleitor.comercial}" maxlength="10"
							mask="(99) 9999-9999" title="informe o numero do fone comercial" />
						<p:tooltip for="comercial" showEvent="focus" hideEvent="blur" />

					</h:panelGrid>
				</p:panel>
				<p:toolbar align="center">
					<p:toolbarGroup align="center">

						<p:commandButton value="Salvar" icon="ui-icon-disk"
							update="painelLista, painel" action="#{eleitorController.save()}" />

						<p:commandButton value="Novo" icon="ui-icon-document"
							update="painel, messages" immediate="true"
							action="#{eleitorController.clean()}" />

						<p:commandButton value="Imprimir" ajax="false" immediate="true"
							icon="ui-icon-print" action="#{eleitorController.print()}" />

					</p:toolbarGroup>
				</p:toolbar>

				<h:panelGrid id="painelLista" columns="1">
					<p:dataTable var="listEleitores" id="tableLista"
						value="#{eleitorController.eleitores}" paginator="true" rows="5"
						style="width:800px;">
						<p:column>
							<f:facet name="header">
								<h:outputText value="Eleitor" width="40%" />
							</f:facet>
							<h:outputText value="#{listEleitores.nome}" />
						</p:column>

						<p:column>
							<f:facet name="header" width="30%">
								<h:outputText value="Responsavel" />
							</f:facet>
							<h:outputText value="#{listEleitores.responsavel.nome}" />
						</p:column>

						<p:column>
							<f:facet name="header" width="30%">
								<h:outputText value="Titulo" />
							</f:facet>
							<h:outputText value="#{listEleitores.titulo}" />
						</p:column>

						<p:column style="height: 2px;">
							<p:commandButton title="Editar" update="painel" immediate="true"
								ajax="false" icon="ui-icon-folder-open" style="height: 20;"
								action="#{eleitorController.editar()}">
								<f:setPropertyActionListener
									target="#{eleitorController.selected}" value="#{listEleitores}" />
							</p:commandButton>
						</p:column>

						<p:column>
							<p:commandButton title="Deletar" update="tableLista" ajax="false"
								icon="ui-icon ui-icon-trash" style="height: 20;"
								action="#{eleitorController.remove()}">
								<f:setPropertyActionListener
									target="#{eleitorController.selected}" value="#{listEleitores}" />
							</p:commandButton>
						</p:column>

					</p:dataTable>
				</h:panelGrid>
			</div>
		</h:form>
	</ui:define>
</ui:composition>